<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!-- 1. 画圆形
		     2.  画正三角形
			 1 思路:   html   div元素
			         css    倒角(必须右边框)
			2  思路: html    div元素  triangle
					 css    斜边
					        不设置宽高
							左边框  50px  实线 红色
							右边框  50px  实线  黄色
							下边框  50px  实线   蓝色  透明度.3-->
		<style>
			div#circle{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				border-radius: 300px;
				/*边框阴影属性  box-shadow属性*/
				box-shadow: 50px 50px 50px 50px hotpink;
				
			}
			/*2. 正三角形*/
			div#triangle{
				width: 0;
				    /* width: 0;
					border-left: 50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 50px solid rgba(0,0,255,.3); */
					border: 50px solid transparent;
					border-top-color: rgba(0,0,255,.3);
					
					
			}
			input{
				outline: 1px solid red;
				outline: 0; /*去掉边框效果 通配选择器中*/
			}
			
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框<input type="text" />
	</body>
</html>
